<!--
 * @Author: Dorange.Wang
 * @Date: 2021-03-31 16:04:51
 * @LastEditors: wangming
 * @LastEditTime: 2022-08-03 15:14:57
 * @Description: file content
-->
<template>
  <component
    :visible.sync="showVisible"
    center
    :show-close="false"
    :width="width"
    :name="name"
    :is="directionType"
    @closeModel="closeModel()"
    :direction="direction"
    :closeOnModal="closeOnModal"
    :dialogDrag="dialogDrag"
  >
    <universal
      v-if="showDom"
      :formList="formList"
      :hmpageInfo="hmpageInfo"
      :formData="formData"
      @ready="temMounted"
      :parentContent="parentContent"
    ></universal>
  </component>
</template>
<script>
const universal = () => import("@/pageComponents/main/index.vue");
const hldialog = () => import("./dialog.vue");
const hldrawer = () => import("./drawer.vue");
import { cloneDeep } from "lodash";
export default {
  provide() {
    return {
      ModalKey: () => this.hmpageInfo.key,
    };
  },
  components: { universal, hldialog, hldrawer },
  data() {
    return {
      authBypage: [],
      parentContent: null,
      directionType: "",
      showVisible: false,
      showDom: false,
      formData: {},
      formList: [],
      hmpageInfo: {},
      name: "",
      width: "",
      onClose: null,
      onOpen: null,
      vmEvents: {},
      direction: "",
      closeOnModal: false,
      dialogDrag: false,
    };
  },
  methods: {
    temMounted(vmEvents) {
      this.vmEvents = vmEvents;
      if (typeof this.onOpen === "function") {
        try {
          this.onOpen(vmEvents.context);
        } catch (error) {
          if (!!error.message.match("is not a function")) {
            let eventName = error.message.replace(
              /\D+\.(\D+) is not a function/,
              "$1"
            );
            this.$message.error(`${eventName} 函数不存在或者该实例未初始化`);
          } else {
            console.log(error);
          }
        }
      }
    },
    async showModel(
      {
        formList,
        hmpageInfo,
        name,
        width,
        directionType,
        parentContent,
        direction,
        dialogDrag,
        closeOnModal,
      },
      onClose,
      onOpen
    ) {
      this.parentContent = parentContent;
      this.directionType = directionType ? "hl" + directionType : "hldialog";
      this.formData = {};
      this.onClose = onClose;
      this.onOpen = onOpen;
      this.width = width;
      this.name = name;
      this.direction = direction;
      this.dialogDrag = !!dialogDrag;
      this.closeOnModal = !!closeOnModal;
      this.formList = cloneDeep(formList);
      if (!!hmpageInfo?.buttonLayout?.children?.length) {
        this.formList.push(hmpageInfo.buttonLayout);
      }
      this.hmpageInfo = cloneDeep(hmpageInfo);
      this.showDom = true;
      this.showVisible = true;
      await this.$nextTick();
    },
    async closeModel(arg) {
      if (typeof this.onClose === "function") {
        this.onClose(this.vmEvents.context, arg);
      }
      this.showVisible = false;
      setTimeout(() => {
        this.showDom = false;
        this.$emit("onclose", this.hmpageInfo.key);
      }, 200);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 10px 0 !important;
}
</style>
